<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器案例</title>
</head>
<body>
  <div id="app">
    <p>使用普通函数对数据进行过滤处理</p>
<!--      通过js设置定时器动态获取系统实时时间-->
    <p>当前时间：{{currentDateFmt()}}{{getCurrentTime()}}</p>
      <br><br>
      <hr>
      <p>使用计算属性实现格式转换</p>
      <p>当前时间：{{computedTime}}</p>
      <br><br>
      <hr>
      <p>使用过滤器实现格式转换</p>
      <p>当前时间：{{currentTime | fmtDate("hh:mm:ss") | toSlice}}</p>
  </div>

<script src="../js/vue.js"></script>
  <script src="../js/dayjs.min.js"></script>
<script type="text/javascript">
    //过滤方法全局注册，一定要写在实例创建之前
    Vue.filter('fmtDate',function(value,fmt='YYYY年MM月DD日 hh:mm:ss'){
          return dayjs(value).format(fmt)
        })
  const vm=new Vue({
    el:"#app",
    data(){
      return{
          currentTime:Date.now()
      }
    },
    methods:{
        //获取实时时间戳
        getCurrentTime() {
            setTimeout(()=>{
                 this.currentTime=Date.now()
            },100)
        },
        //将时间戳数据转换成年月日
        currentDateFmt(){
           return dayjs(this.currentTime).format("YYYY年MM月DD日 hh:mm:ss")
        }
    },
    computed:{
        computedTime(){
            return dayjs(this.currentTime).format("YYYY年MM月DD日 hh:mm:ss")
        }
    },
    filters:{
        //过滤器局部注册
        // fmtDate(value,fmt='YYYY年MM月DD日 hh:mm:ss'){
        //     return dayjs(value).format(fmt)
        // }

        //做数据截取的过滤器,只需要前四位
        toSlice(value){
            return value.slice(4)
        }
    }
  })
</script>
</body>
</html>
